<template>
	<div id="Identify">
		<div class="title" v-bind:style="{'background-image':'url(http://pm.haowenwan.com/public/static/images/icon_identify_bg.png)'}">
			<p><img src="../../assets/images/home/font_search_text.png" alt="" /></p>
			<span>&nbsp;&nbsp;拍&nbsp;&nbsp;品&nbsp;&nbsp;鉴&nbsp;&nbsp;定&nbsp;&nbsp;查&nbsp;&nbsp;询&nbsp;&nbsp;</span>
			<div class="search-box">
				<form action="" @submit.prevent="submitWords">
					<input id="input" type="search" placeholder="请输入搜索内容" v-model="keywords" />
				</form>
				<img src="../../assets/images/home/icon_search_bg.png" alt="" class="search" />
				<div class="qrcode vux-1px-l" @click="scanWXQRcode">
					<img src="../../assets/images/home/icon_camara_qrcode.png" alt="" />
				</div>
			</div>
		</div>
		<div class="main">
			<div class="opreat">
				<grid :show-lr-borders="false" :show-vertical-dividers="false">
					<grid-item link="IdentifyInstruction">
						<img slot="icon" src="../../assets/images/home/icon_look.png">
						<span slot="label">鉴定说明</span>
					</grid-item>
					<grid-item link="/Export">
						<img slot="icon" src="../../assets/images/home/icon_export.png">
						<span slot="label">鉴定专家</span>
					</grid-item>
					<grid-item link="/AppProgress">
						<img slot="icon" src="../../assets/images/home/icon_appoint.png">
						<span slot="label">鉴定申请</span>
					</grid-item>
				</grid>
			</div>
			<group class="scroll">
				<img src="../../assets/images/home/icon_search_identify.png" alt="" />
				<cell title="鉴定动态">
					<marquee>

						<marquee-item duration="500" v-for="(item,index) in propeList" :key="index" @click.native="onClick(item)" class="scrollItem">
							<router-link :to="'Tweets/article_id/' + item.article_id">
								{{item.article_author}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.article_title}}
							</router-link>
						</marquee-item>

					</marquee>

				</cell>
			</group>
		</div>
		<div class="tweet" v-for="item in article_list">
			<router-link to="TweetList">
				<div class="title-wrap">
					<h2>专业推文</h2>
					<div class="right">
						<span>查看更多</span>
						<img src="../../assets/images/home/icon_right2.png" alt="" />
					</div>
				</div>
			</router-link>
			<router-link :to="'Tweets/article_id/' + item.article_id">
				<div class="content">
					<img class="photo" :src="'/los' + item.article_thumb" alt="" />
					<div class="desc">
						<p>{{item.article_title}}</p>
						<div class="intro">
							{{expert_headimg}}
							<span>{{item.article_author}}</span>
							<span class="timer">{{timer2time(item.add_time)}}</span>
							<div class="look">
								<i class="pm-icon icon-eye"></i>
								<span> {{item.article_count}}</span>
							</div>
						</div>
					</div>
				</div>
			</router-link>
		</div>
		<bottom></bottom>
	</div>
</template>

<script>
	import $ from 'jquery';
	import wx from 'weixin-js-sdk';
	import bottom from '../comp/Footer';
	import {
		Grid,
		GridItem,
		ViewBox,
		Group,
		Cell,
		Marquee,
		Search,
		MarqueeItem
	} from 'vux';

	export default {
		data() {
			return {
				propeList: [],
				results: [],
				keywords: '',
				article_list: [],
				articleInfo: '',
				expert_headimg: ''
			}
		},
		components: {
			Grid,
			GridItem,
			ViewBox,
			bottom,
			Group,
			Cell,
			Marquee,
			Search,
			MarqueeItem
		},
		activated() {
			this.getArticle();
			this.getActive();
		},
		mounted() {
			//将时间戳转换成日期的封装函数
			Date.prototype.Format = function(fmt) {
				var o = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate(),
					"h+": this.getHours(),
					"m+": this.getMinutes(),
					"s+": this.getSeconds(),
					"q+": Math.floor((this.getMonth() + 3) / 3),
					"S": this.getMilliseconds()
				};
				if(/(y+)/.test(fmt))
					fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				for(var k in o)
					if(new RegExp("(" + k + ")").test(fmt))
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			}
		},
		methods: {
			getArticle: function() {
				this.$http({
					mathod: 'GET',
					url: '/los/api/article/rec_list.json?category_id=715',
					data: ''
				}).then((result) => {
					this.article_list = result.data.article_list;
				}).catch((err) => {

				})
			},

			getActive: function() {
				this.$http({
					mathod: 'GET',
					url: '/los/api/article/rec_list.json?category_id=716',
					data: ''
				}).then((result) => {
					this.propeList = result.data.article_list;
				}).catch((err) => {

				})
			},
			submitWords: function() {
				if(this.keywords) {
					location.href = '#/AppraisalDetail/' + this.keywords
				}
			},
			//微信扫一扫
			scanWXQRcode: function() {
				let urls = window.location.href.split('#')[0];
				var params = {
					url: urls,
				}
				this.$http({
					method: 'POST',
					url: '/los/api/oauth/script',
					data: params,
				}).then((result) => {
					if(result) {
						wx.config({
							debug: result.data.debug,
							appId: result.data.appId,
							timestamp: result.data.timestamp,
							nonceStr: result.data.nonceStr,
							signature: result.data.signature,
							jsApiList: result.data.jsApiList,
						});
						wx.ready(function() {
							wx.scanQRCode({
								needResult: 1,
								scanType: ["qrCode", "barCode"],
								success: function(res) {
									alert(JSON.stringify(res));
									this.keywords = res.resultStr;
									alert('result:' + this.keywords);
								}
							});
							wx.error(function(res) {
								alert(JSON.stringify(res));
							});
						})
					} else {
						alert('获取信息失败 请重新尝试');
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//将时间戳转换成日期
			timer2time: function(time) {
				return new Date(parseInt(time) * 1000).Format("yyyy-MM-dd hh:mm:ss");
			}
		}
	}
</script>

<style scoped>
	#Identify {
		width: 100%;
		padding-bottom: 1.5rem;
	}

	.header {
		background-color: #fff !important;
	}

	.title {
		width: 100%;
		height: 5.33rem;
		background-size: 100% 100%;
		padding: 0.93rem 0.26rem 0;
	}

	.title p {
		color: rgba(255, 255, 255, .7);
		font-size: 0.93rem;
		text-align: center;
		width: 3.56rem;
		margin: 0 auto;
		height: 0.82rem;
		line-height: 0.82rem;
		font-family: "楷体";
	}

	.title p img {
		width: 100%;
		height: 100%;
	}

	.title span {
		color: rgba(255, 255, 255, .7);
		font-size: 0.37rem;
		margin-top: 0.53rem;
		display: block;
		position: relative;
		text-align: center;
	}

	.title span:before,
	.title span:after {
		content: '';
		position: absolute;
		top: 50%;
		background: rgba(110, 180, 239, .7);
		width: 0.8rem;
		height: 1px;
		transform-origin: 0 0;
		transform: scaleX(0.5);
	}

	.title span:before {
		left: 27%;
	}

	.search-box {
		margin-top: 1rem;
		width: 100%;
		height: 1.06rem;
		background: #fff;
		position: relative;
	}

	.search-box .search {
		position: absolute;
		left: 0.26rem;
		width: 0.37rem;
		height: 0.37rem;
		top: 0.34rem;
	}

	.search-box .qrcode {
		width: 1.7rem;
		position: absolute;
		right: 0;
		top: 0.32rem;
	}

	.search-box .qrcode img {
		width: 0.64rem;
		height: 0.53rem;
		margin-left: 0.53rem;
	}

	.vux-1px-l:before {
		top: 30%;
		height: 50%;
	}

	.search-box .search-input::placeholder {
		color: #aaa;
	}

	.search-box #input {
		width: 7.73rem;
		line-height: 1.07rem;
		padding: 0 0.7rem;
		font-size: 0.34rem;
	}

	.search-box .search-input {
		float: left;
		width: 76.5%;
		height: 1.06rem;
		line-height: 0.4rem;
		padding: 0.13rem 0;
		padding-left: 0.82666rem;
		font-size: 0.32rem;
		border-radius: 0;
		border-top-left-radius: 0.05333rem;
		border-bottom-left-radius: 0.05333rem;
		background: url(../../assets/images/home/icon_search_bg.png) 0.26666rem center no-repeat;
		background-size: 0.34666rem 0.34666rem;
	}

	.search-box .search-btn {
		float: left;
		width: 23.5%;
		height: 1.06666rem;
		text-align: center;
		color: #fff;
		font-size: 0.37333rem;
		background-color: #A30000;
		border-radius: 0;
		border-top-right-radius: 0.05333rem;
		border-bottom-right-radius: 0.05333rem;
	}

	.opreat {
		position: relative;
		background-color: #fff;
	}

	.opreat:after {
		content: " ";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 200%;
		height: 1px;
		border-bottom: 1px solid #f3f3f3;
		transform-origin: 0 0;
		transform: scaleX(0.5);
	}

	.opreat .weui-grids:before,
	.opreat .weui-grids:after,
	.opreat .weui-grid:before,
	.opreat .weui-grid:after {
		border: none;
	}

	.opreat .weui-grid span {
		font-size: 0.34666rem !important;
		line-height: 1;
	}

	.main .scroll {
		background: #fff;
		padding: 0 0.26rem;
		overflow: hidden;
		position: relative;
	}

	.main .scroll img {
		float: left;
		width: 0.34rem;
		height: 0.34rem;
		line-height: 1.06rem;
		display: flex;
		justify-content: center;
		align-items: Center;
		margin-top: 0.45rem;
		margin-right: 0.26rem;
	}

	.main .scroll .scrollImg {
		text-overflow: ellipsis;
		white-space: normal;
		height: 0.5rem;
		overflow: hidden;
	}

	.tweet {
		margin: 0.26rem 0;
		background: #fff;
	}

	.tweet .title-wrap {
		line-height: 1.17rem;
		height: 1.17rem;
		width: 100%;
		padding: 0 0.26rem;
		overflow: hidden;
	}

	.tweet .title-wrap h2 {
		float: left;
		font-size: 0.4rem;
	}

	.tweet .title-wrap .right {
		float: right;
		line-height: 1.17rem;
	}

	.tweet .title-wrap .right span {
		font-size: 0.32rem;
		color: #777;
	}

	.tweet .title-wrap .right img {
		width: 0.32rem;
		height: 0.32rem;
		margin-left: 0.21rem;
	}

	.tweet .content {
		padding: 0 0.26rem 0.26rem;
	}

	.tweet .content .photo {
		height: 3.76rem;
		width: 100%;
		border-top-left-radius: 0.1rem;
		border-top-right-radius: 0.1rem;
	}

	.tweet .content .desc {
		border: solid 1px #f6f6f6;
		border-top: none;
		padding: 0.26rem;
	}

	.tweet .content .desc p {
		width: 100%;
		font-size: 0.37rem;
		color: #333;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.tweet .content .desc .intro {
		overflow: hidden;
		margin-top: 0.26rem;
	}

	.tweet .content .desc .intro .timer {
		margin-left: 0.26rem;
	}

	.tweet .content .desc .intro img {
		width: 0.42rem;
		height: 0.42rem;
		border-radius: 50%;
		float: left;
	}

	.tweet .content .desc .intro span {
		float: left;
		font-size: 0.32rem;
		color: #777;
	}

	.tweet .content .desc .intro b {
		font-weight: normal;
		float: left;
		margin-left: 0.26rem;
		color: #999;
	}

	.tweet .content .desc .intro .look {
		float: right;
		overflow: hidden;
	}

	.tweet .content .desc .intro .look i {
		float: left;
	}

	.tweet .content .desc .intro .look span {
		font-size: 0.29rem;
		color: #777;
	}
</style>
<style>
	#Identify #vux_view_box_body {
		padding-bottom: 0;
	}

	.opreat .weui-grid__icon+.weui-grid__label {
		margin-top: 0.26666rem;
	}
</style>
